<template>
  <div>
    <div id="container1">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item
          label="反馈时间:"
          style="margin-top: 0px; margin-left: 30px; text-align: left"
        >
          <el-date-picker
            style="width: 98%"
            v-model="multiConditon.beginTime"
            type="date"
            placeholder="开始时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            style="width: 100%"
            v-model="multiConditon.endTime"
            type="date"
            placeholder="截止时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            type="primary"
            @click="checkByCondition"
            >查询</el-button
          >
          <el-button type="warning" @click="reloadList">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div
      style="
        float: left;
        width: 80%;
        background-color: #e4f2ff;
        border: 1px solid #6ab7fe;
        margin: 15px 125px;
        height: 40px;
        line-height: 40px;
      "
    >
      <i
        class="el-icon-user-solid"
        style="color: #6ab7fe; line-height: 40px"
      ></i
      ><label style="font-size: 14px"> 反馈总数：{{ pageInfo.total }}</label>
    </div>
    <el-table
      ref="multipleTable"
      :data="pageInfo.list"
      tooltip-effect="dark"
      style="width: 100%; margin: 20px auto"
    >
      <el-table-column type="expand" style="width: auto">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="手机号">
              <span>{{ props.row.customer.phone }}</span>
            </el-form-item>
            <el-form-item label="身份证号">
              <span>{{ props.row.customer.idCard }}</span>
            </el-form-item>
            <el-form-item label="性别">
              <span>{{ props.row.customer.sex }}</span>
            </el-form-item>
            <el-form-item label="注册时间">
              <span>{{ props.row.customer.regtime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        type="index"
        :index="indexMethod"
        label="ID"
        width="auto"
      ></el-table-column>
      <el-table-column
        prop="customer.cname"
        label="反馈人姓名"
        show-overflow-tooltip
        width="auto"
      >
      </el-table-column>
      <el-table-column
        prop="complaintTime"
        label="反馈时间"
        show-overflow-tooltip
        width="auto"
      >
      </el-table-column>
      <el-table-column label="反馈内容" show-overflow-tooltip width="auto">
        <template slot-scope="scope">
          <el-button type="text" @click="detailOpen(scope.row)"
            >点击查看详情</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="反馈状态" show-overflow-tooltip width="auto">
        <template slot-scope="scope">
          <span v-if="scope.row.flag == 1" style="color: red">待处理</span>
          <span v-if="scope.row.flag == 2" style="color: blue">处理中</span>
          <span v-if="scope.row.flag == 3" style="color: green">已处理</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="auto">
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-setting"
            type="primary"
            @click="changeComplaint(scope.row)"
          >
            反馈处理
          </el-button>
          <el-button
            size="mini"
            icon="el-icon-setting"
            type="danger"
            @click="softdel(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 展示反馈内容详情 -->
    <el-dialog title="反馈详情" :visible.sync="contentDialogVisible" center>
      <el-input type="textarea" :rows="4" v-model="detailContent"></el-input>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="contentDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
  </div>
</template>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
#container1 {
  width: 80%;
  height: 60px;
  margin-top: 10px;
  margin-left: 120px;
  border: #cfcccc solid 1px;
  background-color: white;
  text-align: center;
}
</style>
<script>
import {
  getComplaints,
  softdelete,
  getComplaintsByCondition,
  changeComplaintsById,
} from "@/api/complaint";
export default {
  data() {
    return {
      pageInfo: {
        pageSize: 5,
        pageNum: 1,
      },
      list: {},
      multiConditon: {
        beginTime: "",
        endTime: "",
      },
      contentDialogVisible: false,
      detailContent: "",
    };
  },

  methods: {
    loadComplaints() {
      getComplaints(this.pageInfo).then((res) => {
        if (res.data.code == 200) {
          this.pageInfo = res.data.data;
        }
      });
    },
    checkByCondition() {
      var form = {
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
        beginTime: this.multiConditon.beginTime,
        endTime: this.multiConditon.endTime,
      };
      getComplaintsByCondition(form).then((res) => {
        if (res.data.code == 200) {
          this.pageInfo = res.data.data;
          this.multiConditon = {};
        }
      });
    },
    //反馈处理
    changeComplaint(row) {
      changeComplaintsById(row.tcid).then((res) => {
        if (res.data.code == 200) {
          this.loadComplaints();
          this.$message({
            message: "状态修改成功!",
            type: "success",
          });
        }
      });
    },
    reloadList() {
      this.loadComplaints();
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val;
      this.pageInfo.pageNum = 1;
      this.loadComplaints();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageInfo.pageNum = val;
      this.loadComplaints();
    },
    indexMethod(index) {
      return index * 1 + 1;
    },
    softdel(row) {
      softdelete(row.tcid).then((res) => {
        if (res.data.code == 200) {
          alert("删除成功！");
          this.loadComplaints();
        } else {
          alert("系统异常，稍后重试！");
        }
      });
    },
    detailOpen(row) {
      this.contentDialogVisible = true;
      this.detailContent = row.detail;
    },
  },
  mounted() {
    this.loadComplaints();
  },
};
</script>
